<template>
    <div class="welcome">
        <headerBar :title="title"></headerBar>
        <div class="welcome_main">
          <div class="g_card_important welcome-card">
                <div class="welcome_title_import">圣诞特惠,全新优惠包上线!</div>
                <div class="welcome_time">2018.12.21 - 2018.12.30</div>
                <router-link to="/packages" v-if="!isLogined">
                    <div class="welcome_banner">
                        <img src="../assets/images/merry.png" alt="" >
                    </div>
                </router-link>
                <div v-else>
                    <div class="welcome_banner">
                        <img src="../assets/images/merry.png" alt="" >
                    </div>
                </div>
                <div class="welcome_sub">
                  圣诞特惠包上线，优惠多多，惊喜不断! 内含多个热门精品游戏，比大促更低的价格~包您满意
                </div>
                <div class="welcome_login">
                    <van-button class="after-button" size="small" @click="gotoPackage" >查看详情</van-button>
                </div>
            </div>
            <div class="g_card welcome-card">
                <div class="welcome_title">知识问答, 免费加一</div>
                <div class="welcome_time">2018.11.11 - 2018.12.30</div>
                <div @click="answer">
                    <div class="welcome_banner">
                        <img src="../assets/images/datibannner.png" alt="" >
                    </div>
                </div>
                <div class="welcome_sub">
                    欢度圣诞，挑战五个问题，就有机会获得价值6-214元游戏
                </div>
                <div class="welcome_login">
                    <van-button class="after-button" size="small" @click="answer" >点击领取</van-button>
                </div>
            </div>
        </div>
        <q-q></q-q>
    </div>

</template>

<script>
import {
  getActivity,
  getCode,
  loginPhone,
  getUserInfo,
  loginStatus
} from "@/apis/apis";
import { phoneReg } from "@/utils";
import bus from "@/utils/bus";
import QQ from "@/components/qq";
import { mapState } from "vuex";
import headerBar from "@/components/headerBar";

export default {
  data() {
    return {
      activity: "",
      show: false,
      phone: "",
      sms: "",
      code: 60,
      timer: null,
      title: "主页"
    };
  },
  components: {
    QQ,
    headerBar
  },
  computed: {
    ...mapState(["isLogined"])
  },
  methods: {
    gotoPackage() {
      this.$router.push("packages");
    },
    answer() {
      if (!this.isLogined) {
        this.$toast({
          message: "登录后参加活动",
          position: "bottom"
        });
        return bus.$emit("show_login_dialog");
      }
      this.$router.push("answer");
    },
    login() {
      bus.$emit("show_login_dialog", true);
    }
  },
};
</script>

<style lang="scss">
@import "@/style/var.scss";

.welcome-card {
  background-image: url('../assets/images/bg-text-pattern-winter.png');
  background-repeat: repeat;
  padding: 18px 12px;
  box-shadow: 0 0 30px rgba(204,226,255,.2);
}

.welcome {
  overflow: auto;
  height: 100vh;
  color: #e3eff2;
}

.welcome_main {
  margin-top: 70px;
  padding: 12px 8px 0;
}

.welcome_title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px #e3eff2 solid
}

.welcome_title_import {
  font-size: 22px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 6px;
  color: #ffc220;
  border-bottom: 1px #ffc220 solid;
  padding-bottom: 6px;
}

.welcome_time {
  font-size: 12px;
  opacity: 0.7;
}

.welcome_banner {
  display: grid;
  background-color: #eee;
  width: 100%;
  margin-top: 18px;
  border-radius: 10px;
  box-shadow: 5px 5px 2px rgba(204, 226, 255, 0.2);
  img {
    border-radius: 10px;
    width: 100%;
  }
}

.welcome_sub {
  font-size: 14px;
  line-height: 16px;
  margin-top: 18px;
}

.welcome_login {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

.login_cell .van-cell__title {
  max-width: 50px;
}

.countdown {
  background-color: #f5f5f5;
  color: #999;
}

.after-button {
  border-color: #ffc220;
  background-color: #ffc220;
}
</style>
